<template>
	<view class="main">
		<navbar :title="$t('wode.my')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
		</navbar>
		 <view class="select">
		 	<view class="tab align-center-vertical" :class="select==1 ? 'change' : 'today'" @click="change(1)">
		 		{{$t("order.today")}}
				<br/>
				({{total}})
		 	</view>
			<view class="tab align-center-vertical" :class="select==2 ? 'change' : 'history'" @click="change(2)">
				{{$t("order.history")}}
			</view>
		 </view>
		<mescroll-body ref="mescrollRef" @up="upCallback" @init="mescrollInit" @down="downCallback"
			:down="downOption" :up="upOption">
		 <view>
			<view class="goods" :class="{goods1:leader==false}" v-for="item in list">
				<view class="top">
					<view class="number">
						{{item.order_id}}
					</view>
					<view class="time">
						{{item.createtime}}
					</view>
				</view>
				<view class="mid">
					<image :src="item.cover_image" mode=""
					style="width: 250rpx; height: 190rpx;margin: 0 31rpx 40rpx 30rpx;
					border-radius: 10rpx;"
					></image>
					<view class="">
						<view class="name u-line-2">
							{{item.good_name}}
						</view>
						<view class="count">
							<view class="price">
								{{$currency}}{{item.amount}}
							</view>
							<view class="goods-count">
								x1
							</view>
						</view>
					</view>
				</view>
				<view class="line">
					
				</view>
				<view class="of">
					{{$t("order.income")}}
				</view>
				<view class="income" v-if="Number(item.earnings) > 0" >
					<view class="">
						{{$t("order.cash")}}
					</view>
					<view class="">
						+{{ $currency }}{{item.earnings}}
					</view>
				</view>
				<view class="income" v-if="item.is_winner" @click="navTo('/pages/warehouse/warehouse')">
					<view class="good-name">
						{{item.good_name}}
					</view>
					<view>
						x1
					</view>
					<view class="house">
						<view class="go">
							{{$t("order.go")}}
						</view>
						<image src="../../static/order/next.png" mode=""
						style="width: 13rpx;height: 23rpx;"></image>
					</view>
				</view>
				<view class="leader" v-if="Number(item.income) > 0">
					<view class="">
						{{$t("order.leader")}}
					</view>
					<view class="">
						+{{ $currency }}{{item.income}}
					</view>
				</view>
			</view>
		</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		orderlist,
		timestotal
	} from '@/api/order.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
	export default{
		mixins: [MescrollMixin],
		components: {
			MescrollBody
		},
		data() {
			return {
				select:1,
				leader:false,
				warehouse: false,
				total: '',
				list: [],
				downOption: {
					use: true,
					auto: true
				},
				upOption: {
					use: true,
					auto: true,
					page: {
						num: 0,
						size: 10
					}
				},
			};
		},
		onLoad() {
			// this.loadList();
			this.loadTotal();
		},
		watch:{
			'select' (val) {
				this.mescroll.resetUpScroll()
			}
		},
		methods:{
			change(index){
				this.select = index;
				this.list = [];
				// this.loadList();
			},
			async upCallback(page) {
				let pageNum = (page.num - 1) * page.size
				let pageSize = page.size
				// withdrawlog({
				// 	page: 1,
				// }).then(res => {
				// 	let curPageData = res.list
				// 	let curPageLength = curPageData.length
			
				// 	let totalSize = +res.count
			
				// 	if (page.num == 1) this.addressList = []
				// 	this.addressList = this.addressList.concat(curPageData)
					
			
				// }).catch(err => {
					// 	this.mescroll.endErr()
				// })
				let result = await orderlist({
					page: page.num,
					type: this.select
				})
				if (page.num == 1) this.list = []
				this.list = this.list.concat(result)
				let curPageLength = result.length
				this.mescroll.endSuccess(curPageLength)
			},
			async loadList(){
				let result = await orderlist({
					page: 1,
					type: this.select
				})
				this.list = result;
			},
			async loadTotal(){
				let result = await timestotal()
				this.total = result;
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>
<style lang="scss">
	page{
		background-color: #F6F6F6FF;
	}
</style>
<style lang="scss" scoped >
	.main {
	}
	.select{
		height: 114rpx;
		display: flex;
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #65676B;
		text-align: center;
		.tab {
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-direction: column;
		}
		.today,.history{
			width: 375rpx;
		}
		.change{
			width: 375rpx;
			color: #0F0F0E;
			border-bottom: 6rpx solid #C17C1C;
			font-size: 32rpx;
			font-family: Rubik;
			font-weight: 400;
		}
	}
	
	.goods{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 30rpx;
		overflow: hidden;
		.number {
			width: 320rpx;
			overflow:hidden;
			white-space:nowrap;
			text-overflow:ellipsis;
		}
		.top{
			display: flex;
			margin: 30rpx 29rpx 40rpx;
			font-size: 28rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			justify-content: space-between;
		}
		
		.mid{
			display: flex;
			.name{
				font-size: 30rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #0F0F0E;
				margin: 29rpx 31rpx 0rpx 0;
				width: 348rpx;
				
			}
			.count{
				display: flex;
				justify-content: space-between;
				margin: 30rpx 30rpx 0 0;
				.price{
					font-size: 36rpx;
					font-family: Alibaba PuHuiTi;//rubick;
					font-weight: 400;
					color: #FC3E32;
					line-height: 36rpx;
				}
				.goods-count{
					margin-top: 4rpx;
					font-size: 30rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #AAAAAA;
					line-height: 30rpx;
				}
			}
		}
		.line{
			width: 690rpx;
			height: 2rpx;
			background-color: #ECECEC;
		}
		.of{
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #878D9C;
			line-height: 22rpx;
			margin-top: 40rpx;
			margin-left: 29rpx;
		}
		.income, .leader{
			display: flex;
			line-height: 30rpx;
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			margin: 40rpx 28rpx 41rpx 30rpx;
			justify-content: space-between;
			.good-name {
				overflow: hidden;
				white-space:nowrap;
				text-overflow: ellipsis;
				width: 240rpx;
			}
			.house{
				text-align: end;
				display: flex;
				align-items: center;
				.go{
					font-size: 30rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #2399FD;
					margin-right: 11rpx;
				}
			}
		}
	}
	
	.goods1{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 30rpx;
		overflow: hidden;
	}
</style>
